<template>
  <div class="extension">
    <div v-if="loading" style="position: relative;text-align: center;display:flex;align-items: center;width: 100%;height: 100%;background: #ffffff;">
      <p style="text-align: center;width: 100%">正在载入中...</p>
    </div>
    <div v-else>
      <centerHeader :title="header"></centerHeader>
    <div class="input_left">
        <el-dropdown trigger="click" style="cursor: pointer;">
                <span class="addto el-dropdown-link">创建推广链接<i class="el-icon-arrow-down el-icon--right"></i></span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item class="item"><span @click="tgindex">首页推广</span></el-dropdown-item>
                    <el-dropdown-item class="item"><span @click="tgxiaoshuo">小说推广</span></el-dropdown-item>
                     <el-dropdown-item class="item"><span @click="tghot">热门推荐</span></el-dropdown-item>
                </el-dropdown-menu>
        </el-dropdown>
      <div class="input">
        <input type="text" placeholder="搜索关键字" id="search">
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </div>
    </div>
    <div class="extension-box" v-if="arg1show">
      <div>
        <p>原文点击次数</p>
        <h1>{{Information.click_num}}</h1>
      </div>
      <div>
        <p>新增阅读用户</p>
        <h1>{{Information.users.subscribe_count}}</h1>
      </div>
      <div>
        <p>新增关注</p>
        <h1>{{Information.user.subscribe}}</h1>
      </div>
      <div>
        <p>充值总额 <i class="el-icon-question"></i></p>
        <h1>{{Information.pay.pay_sum}}</h1>
      </div>
      <div>
        <p>充值笔数</p>
        <h1>{{Information.pay.pay_count}}</h1>
      </div>
    </div>
    <div class="prompt">以上汇总数据并非实时数据，统计上会滞后一个小时，仅供参考</div>
    <div class="s-table" >
      <table class="table" border="1">
        <thead>
          <th style=" width: 35%;">推广链接</th>
          <th style=" width: 15%;">入口页面</th>
          <th style=" width: 10%;">原文点击次数</th>
          <th style=" width: 10%;">新增阅读用户</th>
          <th style=" width: 8%;">新增关注</th>
          <th style=" width: 8%;">充值金额</th>
          <th style=" width: 14%;">操作</th>
        </thead>
        <tbody class="tbody">
           <tr v-if="code400||!arg0show">
                   <td class="td1" colspan="7">
                     没有记录
                     </td>   
            </tr>
             
          <tr v-for="(item,index) in Indexlist" :key="item.nid" :class="addcla(index)">
            <td class="td1">
              <div class="noveltext">
                <div>{{item.name}}({{item.oa_type==0?'认证公众号':'非认证公众号'}})</div> 
                <div style="font-size:15px;color:#36a4ff;">{{item.promote_url}}<i class="el-icon-document" v-clipboard:copy="item.promote_url" v-clipboard:success="onCopy"></i></div>
                <div style="color:#999;">创建时间: 2018-04-28 10:13:15</div>
              </div>
            </td>
            <td class="td1" v-if="item.promote_type==0">
              <div class="noveltext">
                <div style="color:#36a4ff;">{{item.novel}}</div>
                <div style="color:#666;">{{item.chapter}}</div>
                <div style="color:#999;">关注章节: 第 {{item.default_sub_chapter_num}} 章 </div>
              </div>
            </td>
             <td class="td1" v-if="item.promote_type==1">
              首页
            </td>
            <td class="td1" v-if="item.promote_type==2">
              热门
            </td>
            <td class="td1">{{item.click_num}}</td>
            <td class="td1">
              {{item.pops.pops_count}}
            </td>
            <td class="td1">
              {{item.pop.pop_count}}
            </td>
            <td class="td3">
              <div class="td-div">
                <p>￥{{item.pay.pay_sum}}</p>
                <p>{{item.pay.pay_count}}笔</p>
              </div>
            </td>
            <td class="td3">
              <button class="anniu1" @click="toorder(item)">订单明细</button>
              <el-dropdown >
                <button class="anniu1 el-dropdown-link">更多<i class="el-icon-arrow-down el-icon--right"></i></button>
                <el-dropdown-menu slot="dropdown" class="menu_div">
                    <el-dropdown-item class="item" @click.native="changeEdit(index)"><span><i class="el-icon-edit editi"></i>修改</span></el-dropdown-item>
                    <el-dropdown-item class="item" @click.native="deleteIndex(index)"><span><i class="el-icon-delete editi"></i>删除</span></el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </td>
          </tr>
        </tbody>
      </table>
       <div class="getMore" @click="getMore">加载更多...</div>
    </div>
    <!-- 删除 -->
    <el-dialog
  title="删除确认"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose" v-if="arg0show">
  <span>确定要删除推广链接 "{{Indexlist[listindex].name}}" 吗?</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="getDelete">确 定</el-button>
  </span>
</el-dialog>
<!-- 删除 -->

  <!-- 修改 -->
  <el-dialog
  title="修改推广链接属性"
  :visible.sync="dialogVisible1"
  width="30%"
  :before-close="handleClose" >
  <el-form :model="Edit" :rules="rules" ref="ruleForm" label-width="30%" class="demo-ruleForm">
  <el-form-item label="入口页面" prop="delivery">
    <span v-if="Edit.promote_type==0">小说阅读页</span><span v-if="Edit.promote_type==1">首页</span><span v-if="Edit.promote_type==2">热门</span>
  </el-form-item>
  <el-form-item label="派单渠道名称" prop="name">
    <el-input v-model="Edit.name" id="editname"></el-input>
  </el-form-item>
   <el-form-item label="" prop="name">
    <span>
        <img :src="$utils.getimgurl(Edit.img)" alt="" class="span_img">
      </span>
  </el-form-item>
   <el-form-item label="阅读原文章节" prop="delivery">
    <span v-if="show">{{Edit.text_section.chapter}}</span>
  </el-form-item>
  <el-form-item label="关注章节序号">
    <el-input v-model="Edit.sub_chapter_num" placeholder="可选，如不填则使用小说默认设置"></el-input>
  </el-form-item>
  <el-form-item label="置顶章节序号">
    <el-input v-model="Edit.top_chapter_num" placeholder="可选，如不填则使用小说默认设置"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="getupdate(Edit)">立即修改</el-button>
    <el-button  @click="dialogVisible1 = false">取消</el-button>
  </el-form-item>
  </el-form>
</el-dialog>
  <!-- 修改 -->

  <!-- 创建小说推广 -->
 <el-dialog
  title="创建小说推广"
  :visible.sync="dialogVisible2"
  width="30%"
  :before-close="handleClose">
  <span>请在小说章节列表中选择"创建推广链接"或"生成推广文案"</span>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
  </span>
</el-dialog>
<!-- 创建小说推广 -->
  <!-- 生成推广链接 -->
<el-dialog
  title="生成推广链接"
  :visible.sync="dialogVisible3"
  width="30%"
  :before-close="handleClose">
   <el-form :model="ruleForm" :rules="rules1" ref="ruleForm" label-width="30%" class="demo-ruleForm">
   <el-form-item label="入口页面" prop="delivery">
    <span>
        {{num==1?'首页':'热门'}}
      </span>
  </el-form-item>
   <el-form-item label="派单渠道名称" prop="name">
    <el-input v-model="ruleForm.name" id="indextext"></el-input>
  </el-form-item>

   <el-form-item label="派单渠道类型" prop="name">
     <el-radio-group v-model="ruleForm.resource">
      <el-radio label="认证公众号" id="indexradio" ></el-radio>
      <el-radio label="非认证公众号"></el-radio>
    </el-radio-group>
  </el-form-item>

   <el-form-item>
    <el-button type="primary" @click="newtg">确 定</el-button>
    <el-button  @click="dialogVisible3 = false">取消</el-button>
  </el-form-item>

   </el-form>

</el-dialog>
 <!-- 生成推广链接 -->
  </div>
  </div>
</template>
<script>
import centerHeader from "../../../components/center-header";
export default {
  components: {
    centerHeader
  },
  data() {
    return {
      userInfo: "",
      cccurl: "http://d",
      Indexlist: [],
      Indexlist1: [],
      Information: {
        click_num: "",
        pay: {
          pay_count: "",
          pay_sum: ""
        },
        sum: "",
        user: {
          subscribe: ""
        },
        users: {
          subscribe_count: ""
        }
      },
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      listindex: 0,
      loading: true,
      Edit: {
        chapter: "",
        chapter_num: "",
        img: "",
        n_id: "",
        name: "",
        nid: "",
        oa_type: "",
        promote_type: "",
        sub_chapter_num: "",
        text_section: {
          chapter: ""
        },
        top_chapter_num: ""
      },
      show: false,
      editname: "", //input-name
      Editchapter_num: "",
      num: 0, //创建链接标识
      newname: "", //* 派单渠道名称
      searchinput: "",
      code400: false,
      ruleForm: {
        name: "",
        resource: "认证公众号"
      },
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }]
      },
      rules1: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }]
      },
      parameter1: {
        page: 1,
        d_id: ""
      },
      header: [{ title: "推广链接", path: "/home/Extension/elink" }],
      arg1show: false,
      arg0show: false
    };
  },
  methods: {
    getupdate(from) {
      let that = this;
      if (from.sub_chapter_num == "" || from.sub_chapter_num == null) {
        from.sub_chapter_num = that.Edit.sub_chapter_num;
      }
      if (from.top_chapter_num == "" || from.top_chapter_num == null) {
        from.top_chapter_num = that.Edit.top_chapter_num;
      }
      that.axios
        .post("/cp/v1/Extension/getUpdate", {
          id: that.Edit.nid,
          name: from.name,
          oa_type: 0,
          sub_chapter_num: from.sub_chapter_num,
          n_id: that.Edit.n_id,
          top_chapter_num: from.top_chapter_num
        })
        .then(res => {
          if (res.data.code == 200) {
            that.getIndex(that.userInfo.user_id).then(res => {
              that.Indexlist1 = res.data.data;
              that.Indexlist1.forEach(item => {
                item.promote_url = that.setcccurl(item.nid);
              });
              that.Indexlist = that.Indexlist1;
              that.dialogVisible1 = false;
              that.$message.success("修改成功!");
            });
          } else {
            console.log(res);
            that.$message.error("网络异常，请重试！");
          }
        });
    },
    //加载更多
    getMore() {
      let that = this;
      that.$utils.loadmore(
        that,
        {
          api: "/cp/v1/Extension/getIndex",
          parameter: that.parameter1,
          oldArr: that.Indexlist1
        },
        function(res) {
          // res.data.data = res.data.data.tot;
          if (res) {
            res.data.data.forEach(item => {
              item.promote_url = that.setcccurl(item.nid);
            });
          } else {
            that.$message.warning("没有数据啦");
          }
        },
        function(arr) {
          that.Indexlist = arr;
        }
      );
    },
    //修改点击事件
    changeEdit(index) {
      let that = this;
      that.listindex = index;
      that.axios
        .post("/cp/v1/Extension/getEdit", {
          id: that.Indexlist[index].nid
        })
        .then(res => {
          if (res.data.code == 200) {
            that.Edit = res.data.data;
            that.show = true;
            that.dialogVisible1 = true;
          } else {
            console.log(res);
            this.$message.warning("网络异常，请刷新重试！");
          }
        });
    },
    //点击删除传递index
    deleteIndex(index) {
      this.dialogVisible = true;
      this.listindex = index;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    //删除推广链接
    getDelete() {
      let that = this;
      that.dialogVisible = false;
      that.axios
        .post("/cp/v1/Extension/getDelete", {
          id: that.Indexlist[that.listindex].nid
        })
        .then(res => {
          that.getIndex(that.userInfo.user_id).then(res => {
            that.Indexlist1 = res.data.data;
            that.Indexlist1.forEach(item => {
              item.promote_url = that.setcccurl(item.nid);
            });
            that.Indexlist = that.Indexlist1;
            that.$message.success("删除成功!");
          });
        });
    },
    // 推广链接
    getIndex(d_id) {
      return this.axios.post("/cp/v1/Extension/getIndex", {
        d_id: d_id
      });
    },
    //获取推广的数据
    getInformation(d_id) {
      return this.axios.post("/cp/v1/extension/getInformation", {
        d_id: d_id
      });
    },
    //动态添加class
    addcla(index) {
      if (index % 2 == 0) {
        return "";
      } else {
        return "itembg";
      }
    },
    //to订单详情
    toorder(item) {
      this.$router.push({ path: "orderdetails", query: { id: item.nid } });
    },
    //首页推广
    tgindex() {
      this.num = 1;
      this.dialogVisible3 = true;
    },
    //推广小说
    tgxiaoshuo() {
      this.dialogVisible2 = true;
    },
    //推广热门
    tghot() {
      this.num = 2;
      this.dialogVisible3 = true;
    },
    //创建首页推广
    getHome(name, promote_type, oa_type) {
      let that = this;
      that.axios
        .post("/cp/v1/extension/getHome", {
          name: name,
          promote_type: promote_type,
          oa_type: oa_type,
          d_id: that.userInfo.user_id
        })
        .then(res => {
          if (res.data.code == 200) {
            that.getIndex(that.userInfo.user_id).then(res => {
              that.Indexlist1 = res.data.data;
              that.Indexlist1.forEach(item => {
                item.promote_url = that.setcccurl(item.nid);
              });
              that.Indexlist = that.Indexlist1;
              that.$message.success("创建成功！");
            });
            that.dialogVisible3 = false;
          } else {
            that.$message.error("网络异常，请重试!");
            that.dialogVisible3 = false;
          }
        });
    },
    //创建新推广
    newtg() {
      let that = this;
      that.newname = document.getElementById("indextext").value;
      if (this.ruleForm.resource=='认证公众号') {
        that.getHome(that.newname, 1, 0);
      } else {
        that.getHome(that.newname, 2, 1);
      }
    },
    //搜索
    search() {
      let that = this;
      that.searchinput = document.getElementById("search").value;
      if (that.searchinput == "" || that.searchinput == null) {
        that.code400 = false;
        that.Indexlist = that.Indexlist1;
      } else {
        that.axios
          .post("/cp/v1/Extension/getIndex", {
            d_id: JSON.parse(localStorage.userInfo).user_id,
            name: that.searchinput
          })
          .then(res => {
            if (res.data.code == 400) {
              that.code400 = true;
            } else if (res.data.code == 200) {
              that.Indexlist = res.data.data;
            }
          });
      }
    },
    //点击复制
    onCopy(e) {
      if (e.text) {
        this.$message.success("复制成功!");
      }
    },
    setcccurl(url) {
      url =
        this.cccurl + this.userInfo.user_id + ".131452.com/#/setcookies/" + url;
      return url;
    }
  },
  created() {
    let that = this;
    that.userInfo = JSON.parse(localStorage.userInfo);
    that.parameter1.d_id = that.userInfo.user_id;
    that.axios
      .all([
        that.getIndex(that.userInfo.user_id),
        that.getInformation(that.userInfo.user_id)
      ])
      .then(
        that.axios.spread(function(arg0, arg1) {
          if (arg0.data.code == 200) {
            that.Indexlist1 = arg0.data.data;
            that.Indexlist1.forEach(item => {
              item.promote_url = that.setcccurl(item.nid);
            });
            that.Indexlist = that.Indexlist1;
            that.arg0show = true;
          } else if (arg0.data.code == 201) {
            that.arg0show = false;
            console.log('ccccc');
          } else {
            that.arg0show = false;
            that.$message.error("请刷新重试！");
          }
          if (arg1.data.code == 200) {
            that.Information = arg1.data.data;
            that.arg1show = true;
          } else {
            that.arg1show = false;
            that.$message.error("请刷新重试！");
          }
          that.loading = false;
        })
      );
  }
};
</script>
<style scoped>
.navtwo {
  display: flex;
  justify-content: space-between;
}

.extension {
  margin: 25px 31px;
}

.input_left {
  position: relative;
  margin-top: 20px;
}

.extension .input {
  display: flex;
  justify-content: space-between;
  position: absolute;
  right: 0px;
  top: 0px;
}

.extension .input > input {
  border: 1px solid #ccc;
  font-size: 16px;
  padding: 6px;
  width: 250px;
}

.addto {
  background-color: #36a4ff;
  color: #fff;
  font: 14px/30px "微软雅黑";
  border-radius: 10px;
  width: 100%;
  display: inline-block;
  padding: 5px 10px;
  text-align: center;
}

.extension-box {
  margin-top: 42px;
  display: flex;
  justify-content: space-between;
  height: 140px;
}
.extension-box > div {
  background: #36a4ff;
  width: 15%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.extension-box > div > p {
  font-size: 18px;
  font-family: MicrosoftYaHei-Bold;
  color: rgba(51, 51, 51, 1);
}
/* 表格 */

.s-table {
  margin-top: 15px;
  padding-bottom: 30px;
}

.s-table .table {
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
  border-color: #cccccc;
}

.table > thead {
  height: 40px;
  background-color: #36a4ff;
  color: #fff;
  font: 14px/40px "微软雅黑";
}

.table > tbody td {
  padding: 6px 2px;
}

.table .td1 {
  font-size: 14px;
  color: #666666;
  text-align: center;
}

.tbody .td-div {
  margin: 0 16px;
  text-align: right;
  font-size: 14px;
  color: #666;
}

.tbody .td-div > h2 {
  color: #333333;
}
.td3 {
  text-align: center;
  position: relative;
}
.tbody .td3 > .td-div {
  font-size: 14px;
  color: #666;
}

.tbody .td3 > .td-div > h2 {
  color: #666;
}
.tbody .anniu1 {
  width: 85px;
  height: 30px;
  /* border-radius: 10px; */
  background-color: #0ace25;
  border: none;
  color: #fff;
  font: 14px/30px "微软雅黑";
  margin-top: 10px;
  border-radius: 7px;
}
.table .noveltext {
  margin: 10px 0 0 20px;
  font: 14px/26px "微软雅黑";
  text-align: left;
  color: #666;
}
.prompt {
  height: 20px;
  background-color: #f4f4f4;
  margin-top: 10px;
  font-size: 12px;
  padding: 13px 0 17px 50px;
}
.itembg {
  background: #f0f9eb;
}
.seemore > p {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #cccccc;
}
.changeIndex > p {
  font-size: 16px;
  padding-bottom: 20px;
}
.changeIndex > p > span:first-child {
  width: 25%;
  display: inline-block;
  text-align: right;
  margin-right: 5%;
}
.span_img {
  width: 25%;
}
.elink_input {
  color: #aaaaaa;
  outline: none;
  border: 1px solid #cccccc;
  padding: 5px;
  width: 50%;
}
.elink_input:focus {
  color: #000;
  outline: none;
  border-color: #f59942;
}
.getMore {
  width: 194px;
  height: 43px;
  margin: 50px auto;
  border-radius: 10px;
  background: #f4f4f4;
  color: #666;
  text-align: center;
  line-height: 43px;
  cursor: pointer;
}
.editi {
  margin-right: 10px;
}
.menu_div {
  width: 150px;
}
.el-icon-document {
  color: #666666;
  margin-left: 10px;
  cursor: pointer;
  font-size: 18px;
}
</style>
